<template>
  <div>
    <div class="visit-info">
      <el-row>
        <el-col :span="24">
          <h2 class="title">病历探讨信息</h2>
          <div class="visit-details">
            <el-row>
              <el-col :span="8"><strong>主持人：</strong>{{ formData.caseStdCompere }}</el-col>
              <el-col :span="8"><strong>探讨主题：</strong>{{ formData.caseStdTopic }}</el-col>
              <el-col :span="8"><strong>参会医生：</strong>{{ formData.caseStdGuests }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="8"><strong>探访开始时间：</strong>{{ formatDate(formData.caseStdStartTime) }}</el-col>
              <el-col :span="8"><strong>探讨持续时间：</strong>{{ formData.caseStdNum }} 分钟</el-col>
              <el-col :span="8"><strong>报名时间：</strong>{{ formatDate(formData.caseStdReStartTime) }} 至 {{ formatDate(formData.caseStdReEndTime) }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="8"><strong>费用类型：</strong>{{ formData.caseStdPcAmount ? '收费' : '免费' }}</el-col>
              <el-col :span="8"><strong>探讨费用：</strong>{{ formData.caseStdPcAmount }}</el-col>
            </el-row>
            <el-row>
              <el-col :span="24"><a href="#" class="record-link">探讨内容记录</a></el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <strong>探讨说明：</strong>
                <p>{{ formData.caseStdExplore }}</p>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <h2 class="title">病历探讨报名信息</h2>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="name" label="姓名" width="500"></el-table-column>
            <el-table-column prop="gender" label="性别" width="100"></el-table-column>
            <el-table-column prop="position" label="职称" width="200"></el-table-column>
            <el-table-column prop="registrationTime" label="报名时间" width="300"></el-table-column>
            <el-table-column prop="participation" label="参与讨论" width="300">
              <template v-slot="scope">
                <el-checkbox v-model="scope.row.participation" disabled></el-checkbox>
              </template>
            </el-table-column>
          </el-table>

          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="pageSize"
            @current-change="handleCurrentChange">
          </el-pagination>
        </el-col>
      </el-row>
    </div>

    <el-row>
      <el-col :span="24" class="button-group">
        
        <el-button @click="$router.go(-1)">返回</el-button>
       
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      formData: {
        id: '',  // 修改时需要传递探访记录的唯一标识符，例如探访的ID
        caseStdTopic: '',
        caseStdExplore:'',
        caseStdNum: '',
        caseStdStartTime: '',
        caseStdReStartTime: '',
        caseStdReEndTime: '',
        caseStdPcAmount: '',
        caseStdCompere: '',
        caseStdGuests: '',
        caseStdState: '',
        caseStdCaTime: '',
        caseStdEndTime: '',
        caseStdCaReason: '',
        docInfoName:'',
        docInfoRole:'',
      },
      tableData: [
        { name: '张全蛋', gender: '男', position: '主任医师', registrationTime: '2017-08-14 14:21:00', participation: true },
        { name: '王玛玛', gender: '女', position: '主任医师', registrationTime: '2017-08-14 14:21:00', participation: true },
        { name: '赵铁柱', gender: '男', position: '副主任医师', registrationTime: '2017-08-14 14:21:00', participation: false },
        // ... 继续添加其他数据
      ],
      total: 10, // 假设有10条记录
      pageSize: 5, // 每页显示5条记录
      currentPage: 1
    };
  },
  created() {
    // 在组件创建时，根据路由参数获取要修改的记录ID
    const id = this.$route.params.id;
    this.fetchRecord(id);
  },
  methods: {
    fetchRecord(id) {
      // 根据记录ID从后端获取记录详情
      axios.get(`http://localhost:8080/caseStd/${id}`)
        .then(response => {
          // 将获取的记录数据填充到表单数据中
          this.formData = response.data;
        })
        .catch(error => {
          console.error('获取记录详情失败', error);
          this.$message.error('获取记录详情失败');
        });
    },
    submitForm() {
      // 提交表单数据到后端进行修改
      axios.put(`http://localhost:8080/caseStd/${this.formData.id}`, this.formData)
        .then(response => {
          this.$message.success('修改成功');
          // 修改成功后，可以返回上一页或刷新当前页面
          this.$router.go(-1); // 返回上一页
        })
        .catch(error => {
          console.error('修改失败', error);
          this.$message.error('修改失败');
        });
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      // 根据当前页码重新获取数据
      this.fetchTableData();
    },
    fetchTableData() {
      // 假设后端接口支持分页参数 page 和 size
      axios.get(`http://localhost:8080/tableData?page=${this.currentPage}&size=${this.pageSize}`)
        .then(response => {
          this.tableData = response.data.content;
          this.total = response.data.totalElements;
        })
        .catch(error => {
          console.error('获取表格数据失败', error);
          this.$message.error('获取表格数据失败');
        });
    },
    goBack() {
      this.$router.push('/originalPage'); // 将 '/originalPage' 替换为你希望返回的原始页面路由
    },
    formatDate(dateString) {
      const options = { 
        year: 'numeric', 
        month: '2-digit', 
        day: '2-digit', 
        hour: '2-digit', 
        minute: '2-digit', 
        second: '2-digit' 
      };
      return new Date(dateString).toLocaleDateString(undefined, options);
    }
  }
};
</script>

<style scoped>
.visit-info {
  padding: 20px;
}

.title {
  text-align: center;
  margin-bottom: 10px;
  font-size: 24px;
}

.visit-details {
  /* margin-bottom: 20px; */
  border: 1px solid #dcdfe6;
  padding: 20px;
  border-radius: 5px;
  background-color: #f9f9f9;
}

.visit-details div {
  margin-bottom: 5px;
}

.visit-details p {
  margin: 10px 0;
}

.record-link {
  color: #409eff;
  text-decoration: none;
}

.el-row {
  margin-bottom: 10px;
}

.el-col {
  padding: 5px;
}

.el-table th, .el-table td {
  text-align: center;
}

.button-group {
  text-align: center;
  margin-top: 20px;
}
</style>
